<template>
  <view class="fire-help-page">
    <!-- 紧急报警区域 -->
    <view class="emergency-section">
      <view class="section-title">
        <u-icon name="warning" size="24" color="#666"></u-icon>
        <text class="title-text">紧急报警</text>
      </view>
      
      <view class="emergency-cards">
        <view class="emergency-card primary" @click="callFireDepartment">
          <view class="card-icon">🚒</view>
          <view class="card-content">
            <text class="card-title">消防报警</text>
            <text class="card-phone">119</text>
            <text class="card-desc">火灾紧急报警，24小时服务</text>
          </view>
          <view class="card-action">
            <text class="action-text">立即报警</text>
          </view>
        </view>

        <view class="emergency-card" @click="callSecurity">
          <view class="card-icon">🛡️</view>
          <view class="card-content">
            <text class="card-title">安保报警</text>
            <text class="card-phone">400-123-4568</text>
            <text class="card-desc">社区安保人员24小时值班</text>
          </view>
          <view class="card-action">
            <text class="action-text">联系安保</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 火灾预防区域 -->
    <view class="prevention-section">
      <view class="section-title">
        <text class="title-icon">🔥</text>
        <text class="title-text">火灾预防</text>
      </view>
      
      <view class="prevention-grid">
        <view class="prevention-item" @click="showPreventionInfo(0)">
          <view class="item-icon">🏠</view>
          <text class="item-label">家庭防火</text>
        </view>
        
        <view class="prevention-item" @click="showPreventionInfo(1)">
          <view class="item-icon">🚗</view>
          <text class="item-label">车辆防火</text>
        </view>
        
        <view class="prevention-item" @click="showPreventionInfo(2)">
          <view class="item-icon">⚡</view>
          <text class="item-label">电气防火</text>
        </view>
        
        <view class="prevention-item" @click="showPreventionInfo(3)">
          <view class="item-icon">🍳</view>
          <text class="item-label">厨房防火</text>
        </view>
      </view>
    </view>

    <!-- 逃生指南区域 -->
    <view class="escape-section">
      <view class="section-title">
        <text class="title-icon">🏃</text>
        <text class="title-text">逃生指南</text>
      </view>
      
      <view class="escape-list">
        <view class="escape-item" @click="toggleEscape(0)">
          <view class="escape-question">
            <text class="question-text">火灾发生时如何逃生？</text>
            <text class="question-arrow" :class="{ 'arrow-down': expandedEscape[0] }">></text>
          </view>
          <view class="escape-answer" v-if="expandedEscape[0]">
            <text class="answer-text">1. 保持冷静，不要惊慌\n2. 用湿毛巾捂住口鼻\n3. 弯腰或匍匐前进\n4. 选择安全出口逃生\n5. 不要乘坐电梯</text>
          </view>
        </view>
        
        <view class="escape-item" @click="toggleEscape(1)">
          <view class="escape-question">
            <text class="question-text">被困室内怎么办？</text>
            <text class="question-arrow" :class="{ 'arrow-down': expandedEscape[1] }">></text>
          </view>
          <view class="escape-answer" v-if="expandedEscape[1]">
            <text class="answer-text">1. 关闭门窗，用湿毛巾堵住缝隙\n2. 在窗口挥舞鲜艳物品求救\n3. 拨打119报警\n4. 等待消防人员救援</text>
          </view>
        </view>
        
        <view class="escape-item" @click="toggleEscape(2)">
          <view class="escape-question">
            <text class="question-text">如何正确使用灭火器？</text>
            <text class="question-arrow" :class="{ 'arrow-down': expandedEscape[2] }">></text>
          </view>
          <view class="escape-answer" v-if="expandedEscape[2]">
            <text class="answer-text">1. 拔掉保险销\n2. 握住喷管\n3. 对准火源根部\n4. 按压手柄喷射\n5. 左右扫射灭火</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 消防设施区域 -->
    <view class="facility-section">
      <view class="section-title">
        <text class="title-icon">🧯</text>
        <text class="title-text">消防设施</text>
      </view>
      
      <view class="facility-cards">
        <view class="facility-card" @click="locateFacility(0)">
          <view class="card-icon">🧯</view>
          <view class="card-content">
            <text class="card-title">灭火器位置</text>
            <text class="card-desc">查看附近灭火器分布</text>
          </view>
          <view class="card-action">
            <text class="action-text">查看</text>
          </view>
        </view>
        
        <view class="facility-card" @click="locateFacility(1)">
          <view class="card-icon">🚪</view>
          <view class="card-content">
            <text class="card-title">安全出口</text>
            <text class="card-desc">查看安全出口位置</text>
          </view>
          <view class="card-action">
            <text class="action-text">查看</text>
          </view>
        </view>
        
        <view class="facility-card" @click="locateFacility(2)">
          <view class="card-icon">🚨</view>
          <view class="card-content">
            <text class="card-title">消防栓</text>
            <text class="card-desc">查看消防栓分布</text>
          </view>
          <view class="card-action">
            <text class="action-text">查看</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 紧急联系人区域 -->
    <view class="contact-section">
      <view class="section-title">
        <u-icon name="account-multiple" size="24" color="#666"></u-icon>
        <text class="title-text">紧急联系人</text>
      </view>
      
      <view class="contact-list">
        <view class="contact-item" @click="callContact(0)">
          <view class="contact-avatar">👨‍🚒</view>
          <view class="contact-info">
            <text class="contact-name">消防值班室</text>
            <text class="contact-phone">400-119-0000</text>
          </view>
          <view class="contact-action">
            <text class="action-text">拨打</text>
          </view>
        </view>
        
        <view class="contact-item" @click="callContact(1)">
          <view class="contact-avatar">🛡️</view>
          <view class="contact-info">
            <text class="contact-name">社区安保</text>
            <text class="contact-phone">400-123-4568</text>
          </view>
          <view class="contact-action">
            <text class="action-text">拨打</text>
          </view>
        </view>
        
        <view class="contact-item" @click="callContact(2)">
          <view class="contact-avatar">👨‍💼</view>
          <view class="contact-info">
            <text class="contact-name">物业值班</text>
            <text class="contact-phone">400-123-4567</text>
          </view>
          <view class="contact-action">
            <text class="action-text">拨打</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 注意事项提示 -->
    <view class="notice-info">
      <view class="info-icon">⚠️</view>
      <view class="info-content">
        <text class="info-title">重要提醒</text>
        <text class="info-desc">发现火情请立即拨打119报警，同时通知社区安保和物业。保持冷静，按照逃生指南进行自救。</text>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 消防求助页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 消防求助功能页面，提供火灾报警、消防求助等功能
 */

import { ref, reactive, onMounted } from 'vue'

// 页面数据
const expandedEscape = ref([false, false, false])

// 页面方法
const goBack = () => {
  uni.navigateBack()
}

const refreshPage = () => {
  uni.showToast({
    title: '页面已刷新',
    icon: 'success'
  })
}

const callFireDepartment = () => {
  uni.showModal({
    title: '确认报警',
    content: '是否拨打119消防报警电话？',
    success: (res) => {
      if (res.confirm) {
        // 模拟拨打电话
        uni.showToast({
          title: '正在拨打119...',
          icon: 'loading'
        })
        setTimeout(() => {
          uni.showToast({
            title: '电话已接通',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

const callSecurity = () => {
  uni.showModal({
    title: '确认拨打',
    content: '是否拨打安保值班室 400-123-4568？',
    success: (res) => {
      if (res.confirm) {
        // 模拟拨打电话
        uni.showToast({
          title: '正在拨打...',
          icon: 'loading'
        })
        setTimeout(() => {
          uni.showToast({
            title: '电话已接通',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

const showPreventionInfo = (index) => {
  const topics = ['家庭防火', '车辆防火', '电气防火', '厨房防火']
  uni.showModal({
    title: topics[index],
    content: '此功能正在开发中，敬请期待。如需了解详细防火知识，请咨询消防部门或参加消防培训。',
    showCancel: false,
    confirmText: '知道了'
  })
}

const toggleEscape = (index) => {
  expandedEscape.value[index] = !expandedEscape.value[index]
}

const locateFacility = (index) => {
  const facilities = ['灭火器位置', '安全出口', '消防栓']
  uni.showToast({
    title: `查看${facilities[index]}`,
    icon: 'none'
  })
}

const callContact = (index) => {
  const contacts = ['消防值班室', '社区安保', '物业值班']
  const phones = ['400-119-0000', '400-123-4568', '400-123-4567']
  
  uni.showModal({
    title: '确认拨打',
    content: `是否拨打${contacts[index]}的电话？`,
    success: (res) => {
      if (res.confirm) {
        // 模拟拨打电话
        uni.showToast({
          title: '正在拨打...',
          icon: 'loading'
        })
        setTimeout(() => {
          uni.showToast({
            title: '电话已接通',
            icon: 'success'
          })
        }, 2000)
      }
    }
  })
}

// 页面生命周期
onMounted(() => {
  console.log('消防求助页面已加载')
})
</script>

<style scoped>
.fire-help-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  padding-bottom: 40rpx;
  width: 100%;
}

/* 区域标题 */
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.title-text {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}

/* 紧急报警区域 */
.emergency-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.emergency-cards {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.emergency-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #ff4757;
  transition: all 0.3s ease;
}

.emergency-card.primary {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: #fff;
}

.emergency-card.primary .card-title,
.emergency-card.primary .card-phone,
.emergency-card.primary .card-desc {
  color: #fff;
}

.card-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.card-content {
  flex: 1;
}

.card-title {
  display: block;
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.card-phone {
  display: block;
  color: #ff4757;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.card-desc {
  display: block;
  color: #666;
  font-size: 24rpx;
}

.card-action {
  padding: 16rpx 24rpx;
  background: #ff4757;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.emergency-card.primary .card-action {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* 火灾预防区域 */
.prevention-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.prevention-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.prevention-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.prevention-item:active {
  transform: scale(0.95);
  background: #e9ecef;
}

.item-icon {
  font-size: 48rpx;
  margin-bottom: 20rpx;
}

.item-label {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

/* 逃生指南区域 */
.escape-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.escape-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.escape-item {
  border: 1rpx solid #e9ecef;
  border-radius: 12rpx;
  overflow: hidden;
}

.escape-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background: #f8f9fa;
  cursor: pointer;
}

.question-text {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

.question-arrow {
  color: #666;
  font-size: 24rpx;
  transition: transform 0.3s ease;
}

.arrow-down {
  transform: rotate(90deg);
}

.escape-answer {
  padding: 0 30rpx 30rpx;
  background: #fff;
}

.answer-text {
  color: #666;
  font-size: 26rpx;
  line-height: 1.6;
  white-space: pre-line;
}

/* 消防设施区域 */
.facility-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.facility-cards {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.facility-card {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border-left: 8rpx solid #ff4757;
  transition: all 0.3s ease;
}

.facility-card:active {
  transform: scale(0.98);
  background: #e9ecef;
}

/* 紧急联系人区域 */
.contact-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.contact-item:active {
  transform: scale(0.98);
  background: #e9ecef;
}

.contact-avatar {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.contact-info {
  flex: 1;
}

.contact-name {
  display: block;
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.contact-phone {
  display: block;
  color: #ff4757;
  font-size: 24rpx;
}

.contact-action {
  padding: 16rpx 24rpx;
  background: #ff4757;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 注意事项提示 */
.notice-info {
  display: flex;
  align-items: flex-start;
  background: #fff;
  margin: 30rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.info-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
  margin-top: 4rpx;
}

.info-content {
  flex: 1;
}

.info-title {
  display: block;
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.info-desc {
  display: block;
  color: #666;
  font-size: 24rpx;
  line-height: 1.6;
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
  .prevention-grid {
    grid-template-columns: 1fr;
  }
  
  .emergency-cards,
  .escape-list,
  .facility-cards,
  .contact-list {
    gap: 20rpx;
  }
  
  .emergency-card,
  .facility-card,
  .contact-item {
    padding: 20rpx;
  }
  
  .emergency-section,
  .prevention-section,
  .escape-section,
  .facility-section,
  .contact-section,
  .notice-info {
    margin: 20rpx;
    width: calc(100% - 40rpx);
  }
}
</style>
